<script setup lang="ts">
import { useAppFooterRouteNames as names } from '~/config'

const route = useRoute()

const active = ref(0)

const show = computed(() => {
  if (route.name && names.includes(route.name))
    return true
  return false
})
</script>

<template>
  <van-tabbar v-if="show" v-model="active" route placeholder fixed active-color="#fffd59" inactive-color="#abaaa7">
    <van-tabbar-item replace to="/">
      <span class="text">{{ $t('tabbar.home') }}</span>
      <template #icon="props">
        <img :src="props.active ? '/img/homes.png' : '/img/homes-un.png'" />
      </template>
    </van-tabbar-item>
    <!-- <van-tabbar-item replace to="/">
      <span>{{ $t('tabbar.demo') }}</span>
      <template #icon>
        <div class="i-carbon:home" />
      </template>
    </van-tabbar-item> -->
    <van-tabbar-item replace to="/activity">
      <span class="text">{{ $t('tabbar.activity') }}</span>
      <template #icon="props">
        <img :src="props.active ? '/img/activity.png' : '/img/activity-un.png'" />
      </template>
    </van-tabbar-item>
    <van-tabbar-item replace to="/recharge">
      <span class="text">{{ $t('tabbar.recharge') }}</span>
      <template #icon="props">
        <img :src="props.active ? '/img/recharge.png' : '/img/recharge-un.png'" />
      </template>
    </van-tabbar-item>
    <van-tabbar-item replace to="/custoService">
      <span class="text">{{ $t('tabbar.custoService') }}</span>
      <template #icon="props">
        <img :src="props.active ? '/img/service.png' : '/img/service-un.png'" />
      </template>
    </van-tabbar-item>
    <van-tabbar-item replace to="/my">
      <span class="text">{{ $t('tabbar.my') }}</span>

      <!-- <van-icon name="contact-o" /> -->
      <!-- <template #icon>
        <div class="i-carbon:user" />
      </template> -->
      <template #icon="props">
        <img :src="props.active ? '/img/my.png' : '/img/my-un.png'" />
      </template>
    </van-tabbar-item>
  </van-tabbar>
</template>
<style lang="css" scoped>
::v-deep .van-tabbar {
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
  height: 62px;
  background: #242424;
}
::v-deep .van-tabbar-item__text {
  font-size: 10px;
  margin-top: 3px;
}
::v-deep .van-tabbar-item--active {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  background: #242424;
}
</style>
